<ng-container *ngIf="selection">
  <ul ngbNav
      #nav="ngbNav"
      class="nav-tabs"
      cdStatefulTab="rgw-user-details">
    <li ngbNavItem="details">
      <a ngbNavLink
         i18n>Details</a>
      <ng-template ngbNavContent>
        <div *ngIf="user">
          <table class="table table-striped table-bordered">
            <tbody>
              <tr>
                <td i18n
                    class="bold w-25">Username</td>
                <td class="w-75">{{ user.uid }}</td>
              </tr>
              <tr>
                <td i18n
                    class="bold">Full name</td>
                <td>{{ user.display_name }}</td>
              </tr>
              <tr *ngIf="user.email?.length">
                <td i18n
                    class="bold">Email address</td>
                <td>{{ user.email }}</td>
              </tr>
              <tr>
                <td i18n
                    class="bold">Suspended</td>
                <td>{{ user.suspended | booleanText }}</td>
              </tr>
              <tr>
                <td i18n
                    class="bold">System</td>
                <td>{{ user.system === 'true' | booleanText }}</td>
              </tr>
              <tr>
                <td i18n
                    class="bold">Maximum buckets</td>
                <td>{{ user.max_buckets | map:maxBucketsMap }}</td>
              </tr>
              <tr *ngIf="user.subusers && user.subusers.length">
                <td i18n
                    class="bold">Subusers</td>
                <td>
                  <div *ngFor="let subuser of user.subusers">
                    {{ subuser.id }} ({{ subuser.permissions }})
                  </div>
                </td>
              </tr>
              <tr *ngIf="user.caps && user.caps.length">
                <td i18n
                    class="bold">Capabilities</td>
                <td>
                  <div *ngFor="let cap of user.caps">
                    {{ cap.type }} ({{ cap.perm }})
                  </div>
                </td>
              </tr>
            </tbody>
          </table>

          <!-- User quota -->
          <div *ngIf="user.user_quota">
            <legend i18n>User quota</legend>
            <table class="table table-striped table-bordered">
              <tbody>
                <tr>
                  <td i18n
                      class="bold w-25">Enabled</td>
                  <td class="w-75">{{ user.user_quota.enabled | booleanText }}</td>
                </tr>
                <tr>
                  <td i18n
                      class="bold">Maximum size</td>
                  <td *ngIf="!user.user_quota.enabled">-</td>
                  <td *ngIf="user.user_quota.enabled && user.user_quota.max_size <= -1"
                      i18n>Unlimited</td>
                  <td *ngIf="user.user_quota.enabled && user.user_quota.max_size > -1">
                    {{ user.user_quota.max_size | dimlessBinary }}
                  </td>
                </tr>
                <tr>
                  <td i18n
                      class="bold">Maximum objects</td>
                  <td *ngIf="!user.user_quota.enabled">-</td>
                  <td *ngIf="user.user_quota.enabled && user.user_quota.max_objects <= -1"
                      i18n>Unlimited</td>
                  <td *ngIf="user.user_quota.enabled && user.user_quota.max_objects > -1">
                    {{ user.user_quota.max_objects }}
                  </td>
                </tr>
              </tbody>
            </table>
          </div>

          <!-- Bucket quota -->
          <div *ngIf="user.bucket_quota">
            <legend i18n>Bucket quota</legend>
            <table class="table table-striped table-bordered">
              <tbody>
                <tr>
                  <td i18n
                      class="bold w-25">Enabled</td>
                  <td class="w-75">{{ user.bucket_quota.enabled | booleanText }}</td>
                </tr>
                <tr>
                  <td i18n
                      class="bold">Maximum size</td>
                  <td *ngIf="!user.bucket_quota.enabled">-</td>
                  <td *ngIf="user.bucket_quota.enabled && user.bucket_quota.max_size <= -1"
                      i18n>Unlimited</td>
                  <td *ngIf="user.bucket_quota.enabled && user.bucket_quota.max_size > -1">
                    {{ user.bucket_quota.max_size | dimlessBinary }}
                  </td>
                </tr>
                <tr>
                  <td i18n
                      class="bold">Maximum objects</td>
                  <td *ngIf="!user.bucket_quota.enabled">-</td>
                  <td *ngIf="user.bucket_quota.enabled && user.bucket_quota.max_objects <= -1"
                      i18n>Unlimited</td>
                  <td *ngIf="user.bucket_quota.enabled && user.bucket_quota.max_objects > -1">
                    {{ user.bucket_quota.max_objects }}
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </ng-template>
    </li>
    <li ngbNavItem="keys"
        *ngIf="keys.length">
      <a ngbNavLink
         i18n>Keys</a>
      <ng-template ngbNavContent>
        <cd-table [data]="keys"
                  [columns]="keysColumns"
                  columnMode="flex"
                  selectionType="multi"
                  forceIdentifier="true"
                  (updateSelection)="updateKeysSelection($event)">
          <div class="table-actions">
            <div class="btn-group"
                 dropdown>
              <button type="button"
                      class="btn btn-accent"
                      [disabled]="!keysSelection.hasSingleSelection"
                      (click)="showKeyModal()">
                <i [ngClass]="[icons.show]"></i>
                <ng-container i18n>Show</ng-container>
              </button>
            </div>
          </div>
        </cd-table>
      </ng-template>
    </li>
  </ul>

  <div [ngbNavOutlet]="nav"></div>
</ng-container>
